<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="类型" prop="yuName">
        <el-select v-model="queryParams.yuName" placeholder="请选择类型" clearable>
          <el-option
            v-for="dict in yuNameOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="yuMc">
        <el-input v-model="queryParams.yuMc" placeholder="请输入名称" clearable />
      </el-form-item>
      <el-form-item label="日期" prop="insTime">
        <el-date-picker clearable
          v-model="queryParams.insTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="症状" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择症状" clearable>
          <el-option
            v-for="dict in statusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:main:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:main:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:main:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:main:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-date"
          size="mini"
          @click="gotoAppointment"
        >预约日历</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mainList" @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName" :header-cell-style="getHeaderCellStyle" border stripe>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="类型" align="center" prop="yuName" />
      <el-table-column label="名称" align="center" prop="yuMc" />
      <el-table-column align="center" prop="insTime" width="220">
        <template slot="header">
          <div style="display: flex; align-items: center; justify-content: center;">
            <span style="margin-right: 8px;">日期</span>
            <el-button
              :type="showFullDateTime ? 'success' : 'primary'"
              size="mini"
              circle
              @click="toggleDateFormat"
              :title="showFullDateTime ? '显示简化日期' : '显示完整日期时间'"
              style="width: 24px; height: 24px; padding: 0; margin-left: 5px;">
              <i :class="showFullDateTime ? 'el-icon-time' : 'el-icon-date'" style="font-size: 12px;"></i>
            </el-button>
          </div>
        </template>
        <template slot-scope="scope">
          <span v-if="showFullDateTime">
            {{ parseTime(scope.row.insTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
          </span>
          <span v-else>
            {{ parseTime(scope.row.insTime, '{y}-{m}-{d}') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="症状" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="yuDesc" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:main:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:main:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改宠物状态对话框 -->
    <el-dialog 
      :title="title" 
      :visible.sync="open" 
      width="900px" 
      append-to-body
      :before-close="cancel"
      :modal-append-to-body="false"
      custom-class="pet-dialog">
      <div slot="title" class="dialog-title">
        <i class="el-icon-star-on dialog-icon"></i>
        <span class="title-text">{{ title }}</span>
      </div>
      
      <div class="dialog-content">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="pet-form">
          <el-row :gutter="30">
            <!-- 左侧：基本信息 -->
            <el-col :span="11">
              <div class="form-section">
                <div class="section-title">
                  <i class="el-icon-collection-tag"></i>
                  <span>基本信息</span>
                </div>
                
                <el-form-item label="类型" prop="yuName">
                  <el-select v-model="form.yuName" placeholder="请选择可爱的宠物类型" clearable @change="onTypeChange" class="cute-select">
                    <el-option
                      v-for="dict in yuNameOptions"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value">
                      <span class="option-content">
                        <i class="el-icon-grape"></i>
                        {{ dict.label }}
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>
                
                <el-form-item label="名称" prop="yuMc">
                  <el-select v-model="form.yuMc" placeholder="选择宠物名称" clearable :disabled="!form.yuName" class="cute-select">
                    <el-option
                      v-for="option in currentNameOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value">
                      <span class="option-content">
                        <i class="el-icon-magic-stick"></i>
                        {{ option.label }}
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>
                
                <el-form-item label="日期" prop="insTime">
                  <el-date-picker 
                    v-model="form.insTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择记录日期时间"
                    class="cute-datepicker"
                    append-to-body
                    popper-class="pet-date-picker-dropdown"
                    clearable>
                  </el-date-picker>
                </el-form-item>
                
                <el-form-item label="状态" prop="status">
                  <el-select v-model="form.status" placeholder="选择宠物状态" clearable class="cute-select">
                    <el-option
                      v-for="dict in statusOptions"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value">
                      <span class="option-content">
                        <i :class="dict.value === '正常' ? 'el-icon-sunny' : 'el-icon-warning'"></i>
                        {{ dict.label }}
                      </span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            
            <!-- 右侧：备注信息 -->
            <el-col :span="13">
              <div class="form-section">
                <div class="section-title">
                  <i class="el-icon-edit-outline"></i>
                  <span>备注信息</span>
                </div>
                
                <el-form-item label="备注" prop="yuDesc" label-width="60px">
                  <el-input 
                    v-model="form.yuDesc" 
                    type="textarea" 
                    placeholder="记录下宠物的特别情况吧~" 
                    :rows="5" 
                    class="cute-textarea" />
                </el-form-item>
                
                <el-form-item label="常用" label-width="60px">
                  <el-select
                    v-model="selectedCommonRemark"
                    placeholder="选择常用备注快速填充"
                    clearable
                    @change="fillCommonRemark"
                    class="cute-select"
                    style="width: 100%;">
                    <el-option
                      v-for="remark in commonRemarks"
                      :key="remark.value"
                      :label="remark.label"
                      :value="remark.value"
                      :disabled="remark.disabled">
                      <span style="float: left">
                        <i v-if="!remark.disabled" class="el-icon-star-off" style="margin-right: 5px;"></i>
                        {{ remark.label }}
                      </span>
                      <span style="float: right; color: #ff8fb3; font-size: 11px; font-style: italic;">{{ remark.desc }}</span>
                    </el-option>
                  </el-select>
                  <div class="tip-text">
                    🌸 选择常用备注会自动添加到备注框中~
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="cancel-btn">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="submitForm" class="submit-btn">
          <i class="el-icon-check"></i>
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMain, getMain, delMain, addMain, updateMain, listActiveCategory, listCategoriesWithNames } from "@/api/system/main"

export default {
  name: "Main",
  data() {
    return {
      // 显示完整日期时间的标记
      showFullDateTime: false,
      // 选中的常用备注
      selectedCommonRemark: null,
      // 常用备注选项
      commonRemarks: [
        { value: 'normal_feed', label: '今日正常喂食', desc: '日常记录' },
        { value: 'abnormal_symptom', label: '症状异常', desc: '异常情况' },
        { value: 'water_change', label: '今日换水', desc: '维护记录' },
        { value: 'food_change', label: '更换饲料', desc: '饮食调整' },
        { value: 'health_check', label: '健康检查', desc: '定期检查' },
        { value: 'medicine', label: '投药治疗', desc: '治疗记录' },
        { value: 'environment_adjust', label: '环境调整', desc: '环境变化' },
        { value: '', label: '─────── 自定义 ───────', desc: '', disabled: true },
        { value: 'custom', label: '手动输入其他备注', desc: '自定义内容' }
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 鱼主表格数据
      mainList: [],
      // 类型选项(动态加载)
      yuNameOptions: [],
      // 症状选项
      statusOptions: [
        { value: '正常', label: '正常' },
        { value: '异常', label: '异常' }
      ],
      // 名称选项配置(动态加载)
      nameOptionsMap: {},
      // 当前可用的名称选项
      currentNameOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        yuName: null,
        yuMc: null,
        insTime: null,
        status: null,
        yuDesc: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        yuName: [
          { required: true, message: "类型不能为空", trigger: "change" }
        ],
        yuMc: [
          { required: true, message: "名称不能为空", trigger: "change" }
        ],
        insTime: [
          { required: true, message: "日期不能为空", trigger: "blur" },
          { 
            validator: (rule, value, callback) => {
              if (value) {
                const selectedTime = new Date(value);
                const currentTime = new Date();
                if (selectedTime > currentTime) {
                  callback(new Error('不允许选择大于当前时间的时间'));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            }, 
            trigger: 'blur' 
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.loadCategories()
    
    // 监听分类变化事件
    this.$root.$on('categoryChanged', this.reloadCategories)
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    this.$root.$off('categoryChanged', this.reloadCategories)
  },
  methods: {
    /** 前往预约日历页面 */
    gotoAppointment() {
      this.$router.push('/system/appointment');
    },
    /** 表头样式设置 */
    getHeaderCellStyle({ column, columnIndex }) {
      const colors = [
        'linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%)', // 绿色渐变
        'linear-gradient(135deg, #ffd3a5 0%, #fd9853 100%)', // 橙色渐变
        'linear-gradient(135deg, #a8caba 0%, #5d8c99 100%)', // 青蓝渐变
        'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)', // 粉黄渐变
        'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)', // 蓝色渐变
        'linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%)', // 黄绿渐变
        'linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%)', // 粉色渐变
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // 紫色渐变
        'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', // 红粉渐变
        'linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%)'  // 桃粉渐变
      ];
      
      return {
        background: colors[columnIndex % colors.length],
        color: '#333333',
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: '14px',
        borderRight: '1px solid rgba(255,255,255,0.3)',
        position: 'relative',
        padding: '12px 0'
      }
    },
    // 将表格行设置为不同颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.status === '异常') {
        return 'warning-row';
      }
      return '';
    },
    /** 加载宠物分类数据 */
    loadCategories() {
      // 只加载顶级分类作为类型选项
      listActiveCategory().then(response => {
        // 过滤出顶级分类（level = 1）
        const topLevelCategories = response.data.filter(item => item.level === 1)
        this.yuNameOptions = topLevelCategories.map(item => ({
          value: item.categoryName,
          label: item.categoryName,
          categoryId: item.categoryId
        }))
      })

      // 加载分类及其子分类名称的映射关系
      listCategoriesWithNames().then(response => {
        this.nameOptionsMap = response.data
      })
    },
    /** 重新加载宠物分类数据 */
    reloadCategories() {
      this.loadCategories()
    },
    /** 查询鱼主列表 */
    getList() {
      this.loading = true
      listMain(this.queryParams).then(response => {
        this.mainList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        yuId: null,
        yuName: null,
        categoryId: null,
        yuMc: null,
        insTime: null,
        status: null,
        yuDesc: null,
        delFlag: null,
        createTime: null,
        updateTime: null
      }
      this.currentNameOptions = []
      this.selectedCommonRemark = null  // 清空常用备注选项
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.yuId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加宠物状态"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const yuId = row.yuId || this.ids
      getMain(yuId).then(response => {
        this.form = response.data
        // 设置名称选项
        if (this.form.yuName) {
          this.currentNameOptions = this.nameOptionsMap[this.form.yuName] || []
        }
        this.open = true
        this.title = "修改宠物状态"
      })
    },
    /** 类型变化时的处理 */
    onTypeChange(value) {
      // 清空名称选择
      this.form.yuMc = null
      // 设置对应的名称选项
      this.currentNameOptions = this.nameOptionsMap[value] || []
      // 设置categoryId
      const selectedCategory = this.yuNameOptions.find(option => option.value === value)
      if (selectedCategory) {
        this.form.categoryId = selectedCategory.categoryId
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.yuId != null) {
            updateMain(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addMain(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const yuIds = row.yuId || this.ids
      this.$modal.confirm('是否确认删除鱼主编号为"' + yuIds + '"的数据项？').then(function() {
        return delMain(yuIds)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/main/export', {
        ...this.queryParams
      }, `main_${new Date().getTime()}.xlsx`)
    },
    /** 切换日期显示格式 */
    toggleDateFormat() {
      this.showFullDateTime = !this.showFullDateTime
      this.$message.success(this.showFullDateTime ? '已切换为完整日期时间格式' : '已切换为简化日期格式')
    },
    /** 填充常用备注 */
    fillCommonRemark(value) {
      if (!value || value === 'custom') {
        this.selectedCommonRemark = null
        return
      }

      const selectedRemark = this.commonRemarks.find(item => item.value === value)
      if (selectedRemark && selectedRemark.label) {
        // 如果备注框已有内容，追加；否则直接填充
        if (this.form.yuDesc && this.form.yuDesc.trim()) {
          this.form.yuDesc += '；' + selectedRemark.label
        } else {
          this.form.yuDesc = selectedRemark.label
        }

        // 清空选择，允许再次选择
        this.selectedCommonRemark = null

        // 提示用户
        this.$message({
          message: `已添加常用备注：${selectedRemark.label}`,
          type: 'success',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 表格行样式优化 */
.el-table tbody tr {
  transition: all 0.3s ease;
}

.el-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 注释掉原来的表头样式，使用getHeaderCellStyle方法设置样式
::v-deep .el-table .el-table__header th {
  color: #333333 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  text-align: center;
  padding: 15px 8px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #f0f8ff !important;
}
*/

/* 注释掉单独的背景色设置
::v-deep .el-table .el-table__header th:nth-child(1) {
  background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(2) {
  background: linear-gradient(135deg, #ffd3a5 0%, #fd9853 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(3) {
  background: linear-gradient(135deg, #a8caba 0%, #5d8c99 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(4) {
  background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(5) {
  background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(6) {
  background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%) !important;
}

::v-deep .el-table .el-table__header th:nth-child(7) {
  background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%) !important;
}
*/

::v-deep .el-table .el-table__header th .cell {
  font-weight: bold !important;
  font-size: 15px !important;
  color: #333333 !important;
  letter-spacing: 0.5px;
}

/* 注释掉可能干扰的选择器 
::v-deep .el-table__header-wrapper {
  th {
    background-color: #f0f8ff !important;
  }
}
*/

/* 表格整体美化 */
.el-table {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 女性化对话框样式 */
.pet-dialog {
  border-radius: 20px !important;
  box-shadow: 0 15px 35px rgba(255, 143, 179, 0.3) !important;
}

.pet-dialog .el-dialog__header {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
  padding: 20px 30px;
  border-bottom: none;
}

.pet-dialog .el-dialog__body {
  position: relative;
  padding: 0;
}

.dialog-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff9a9e 0%, #66a6ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
}

.dialog-icon {
  font-size: 22px;
  margin-right: 10px;
  background: linear-gradient(135deg, #ff9a9e 0%, #66a6ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.title-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #ff9a9e 0%, #66a6ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
}

.dialog-content {
  padding: 25px 40px;
  background: linear-gradient(180deg, #fef7f7 0%, #fff 50%);
}

.pet-form {
  .el-form-item__label {
    color: #ff6b9d;
    font-weight: 600;
    font-size: 14px;
  }
  
  .el-row {
    min-height: 350px;
  }
}

.form-section {
  margin-bottom: 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(255, 143, 179, 0.1);
  border: 1px solid rgba(255, 182, 193, 0.3);
  min-height: 380px;
  
  .el-form-item {
    margin-bottom: 25px;
  }
  
  .el-form-item:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ffc0cb;
  font-weight: 600;
  font-size: 16px;
  background: linear-gradient(135deg, #ff9a9e 0%, #66a6ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
  
  i {
    margin-right: 8px;
    font-size: 18px;
    background: linear-gradient(135deg, #ff9a9e 0%, #66a6ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
  }
}

.cute-select {
  .el-input__inner {
    border: 2px solid #ffc0cb;
    border-radius: 12px;
    transition: all 0.3s ease;
    
    &:focus {
      border-color: #ff69b4;
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    }
  }
  
  .el-input__icon {
    color: #ff69b4;
  }
}

.cute-datepicker {
  width: 100%;
  
  .el-input__inner {
    border: 2px solid #ffc0cb;
    border-radius: 12px;
    transition: all 0.3s ease;
    
    &:focus {
      border-color: #ff69b4;
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    }
  }
}

.cute-textarea {
  .el-textarea__inner {
    border: 2px solid #ffc0cb;
    border-radius: 12px;
    transition: all 0.3s ease;
    resize: none;
    
    &:focus {
      border-color: #ff69b4;
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    }
  }
}

.option-content {
  display: flex;
  align-items: center;
  
  i {
    margin-right: 6px;
    color: #ff69b4;
  }
}

.tip-text {
  margin-top: 8px;
  font-size: 11px;
  color: #ff8fb3;
  font-style: italic;
  background: rgba(255, 182, 193, 0.1);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid #ffc0cb;
  line-height: 1.3;
}

.dialog-footer {
  padding: 20px 30px;
  background: linear-gradient(135deg, #fef7f7 0%, #fff 100%);
  text-align: right;
}

.submit-btn {
  background: linear-gradient(135deg, #ff9a9e 0%, #ff69b4 100%);
  border: none;
  border-radius: 25px;
  padding: 12px 25px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.5);
  }
  
  i {
    margin-right: 5px;
  }
}

.cancel-btn {
  border: 2px solid #ffc0cb;
  border-radius: 25px;
  padding: 12px 25px;
  color: #ff69b4;
  background: #fff;
  margin-right: 15px;
  transition: all 0.3s ease;
  
  &:hover {
    background: #ffc0cb;
    color: #fff;
    transform: translateY(-2px);
  }
  
  i {
    margin-right: 5px;
  }
}

/* 下拉框下拉面板美化 */
.el-select-dropdown {
  border-radius: 12px;
  border: 2px solid #ffc0cb;
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
}

.el-select-dropdown .el-select-dropdown__item {
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #fff;
  }
}

/* 日期选择器美化 */
.el-date-picker {
  .el-picker-panel {
    border-radius: 15px;
    border: 2px solid #ffc0cb;
    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.2);
  }
  
  .el-date-picker__header {
    border-bottom: 1px solid #ffc0cb;
  }
  
  .el-picker-panel__body {
    .el-date-table td.today span {
      background: #ff69b4;
      color: #fff;
    }
    
    .el-date-table td.current:not(.disabled) span {
      background: linear-gradient(135deg, #ff9a9e 0%, #ff69b4 100%);
    }
  }
}

/* 专门为宠物对话框的日期选择器样式 */
.pet-date-picker-dropdown {
  z-index: 9999 !important;
  border-radius: 15px !important;
  border: 2px solid #ffc0cb !important;
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3) !important;
}

.pet-date-picker-dropdown .el-picker-panel {
  border-radius: 15px !important;
  border: none !important;
}

.pet-date-picker-dropdown .el-date-picker__header {
  border-bottom: 1px solid #ffc0cb !important;
  background: linear-gradient(135deg, #fef7f7 0%, #fff 100%) !important;
}

.pet-date-picker-dropdown .el-picker-panel__body .el-date-table td.today span {
  background: #ff69b4 !important;
  color: #fff !important;
}

.pet-date-picker-dropdown .el-picker-panel__body .el-date-table td.current:not(.disabled) span {
  background: linear-gradient(135deg, #ff9a9e 0%, #ff69b4 100%) !important;
  color: #fff !important;
}
</style>
